<template>
    <van-button :round="round" :plain="plain" :size="size" :type="type" @click="handleChange">
        <sorter :order="order">
            <slot></slot>
        </sorter>
    </van-button>
</template>

<script>
  import { Button } from "vant"
  import Sorter from "./Sorter"

  export default {
    name: "SortButton",
    components: {
      Sorter,
      [Button.name]: Button,
    },
    model: {
      prop: "order",
      event: "change-order",
    },
    props: {
      order: String,
      size: String,
      plain: Boolean,
      round: Boolean,
      type: String,
    },
    methods: {
      changeOrder(direction) {
        this.$emit("change-order", direction)
      },
      handleChange() {
        const { order } = this
        if (order === "ascend") {
          this.changeOrder("descend")
        } else if (order === "descend") {
          this.changeOrder(undefined)
        } else {
          this.changeOrder("ascend")
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
</style>
